<!DOCTYPE html>
<html lang="fr">
	<head>
		<!-- Hi there -->
		<title>Cyrine MALEK - Webdesigner</title>
		<link rel="shortcut icon" type="image/png" href="favicon.png" />
		<link href='http://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>
		<link href="css/style.css" rel="stylesheet">
		<script src="../../M4/src/M4.js"></script>
		<script src="../../M4Tween/src/M4Tween.js"></script>
		<script src="../../M4Tween/src/Scroll.js"></script>
		<script src="../../Slider/src/Slider.js"></script>
		<script src="../../Stage/src/Stage.js"></script>
		<script src="js/cmalek/ScrollAnimator.js"></script>
		<script src="js/cmalek/main.js"></script>
		<meta name="viewport" content="width=1205px"/>
	</head>
	<body id="home">
		<div id="loader">

		</div>
		<menu class="second">
			<li><a href="#home"><span class="over"></span><span class="pic"></span></a></li>
			<li><a href="#about"><span class="over"></span><span class="pic"></span></a></li>
			<li><a href="#portfolio"><span class="over"></span><span class="pic"></span></a></li>
			<li><a href="#contact"><span class="over"></span><span class="pic"></span></a></li>
		</menu>
		<header>
			<menu>
				<li class="separator"></li>
				<li><a href="#home">Accueil</a></li>
				<li class="separator"></li>
				<li><a href="#about">&agrave; Propos</a></li>
				<li class="separator"></li>
				<li class="logo">&nbsp;</li>
				<li class="separator"></li>
				<li><a href="#portfolio">Portfolio</a></li>
				<li class="separator"></li>
				<li><a href="#contact">Contact</a></li>
				<li class="separator"></li>
			</menu>
		</header>
		<div class="scene scrolldown">
			<div class="a1"></div>
			<div class="a2"></div>
			<div class="background"></div>
		</div>
		<div class="scene skills">
			<div class="lvl_3 even"><div class="little_top"></div><div class="little_right"></div>Illustrateur</div>
			<div class="lvl_5"><div class="big_top"></div><div class="little_top"></div><div class="little_left"></div>Graphiste</div>
			<div class="lvl_4 even"><div class="big_right"></div><div class="little_left"></div>Webdesigner</div>
			<div class="lvl_2"><div class="little_top"></div><div class="little_right"></div>Motion designer</div>
			<div class="lvl_1 even"><div class="little_top"></div><div class="little_left"></div>Photographe</div>
		</div>
		<div id="about" class="scene about">
			<h3>&agrave; Propos de Moi</h3>
			<div class="brigitte">
				<div class="arrow a1 above"></div>
				<div class="arrow a1 below"></div>
				<div class="arrow a2 above"></div>
				<div class="arrow a2 below"></div>
				<div class="arrow a3 above"></div>
				<div class="arrow a3 below"></div>
				<div class="arrow a4 above"></div>
				<div class="arrow a4 below"></div>
				<div class="arrow a5 above"></div>
				<div class="arrow a5 below"></div>
				<div class="arrow a6 above"></div>
				<div class="arrow a6 below"></div>
				<div class="arrow a7 above"></div>
				<div class="arrow a7 below"></div>
				<div class="arrow a8 above"></div>
				<div class="arrow a8 below"></div>
			</div>
			<menu class="social">
				<li><a target="_blank" href="http://pinterest.com/cyrinem/" class="pinterest"><span class="over"></span><span class="pic"></span></a></li>
				<li><a target="_blank" href="http://fr.linkedin.com/pub/cyrine-malek/54/279/b39" class="linkedin"><span class="over"></span><span class="pic"></span></a></li>
				<li><a target="_blank" href="http://fr.viadeo.com/fr/profile/cyrine.malek" class="viadeo"><span class="over"></span><span class="pic"></span></a></li>
				<li><a target="_blank" href="http://www.flickr.com/people/qtlm/" class="flicker"><span class="over"></span><span class="pic"></span></a></li>
			</menu>
			<div class="content">
				<h1>Cyrine Malek,</h1>
				<h4>designer graphique de 24 ans,</h4>
				<h4 class="current">actuellement &agrave; la recherche d'un poste.</h4>
				<p>Apr&egrave;s un Baccalaur&eacute;at en communication graphique,<br>
				j'ai continu&eacute; mes &eacute;tudes en alternance avec un BTS en communication<br>
				visuelle et une Licence Professionnelle en Multim&eacute;dia.</p>
				<p>A travers mes &eacute;tudes je suis toujours rest&eacute;e fid&egrave;le au graphisme en<br>
				travaillant avec diff&eacute;rents m&eacute;dias : le print, le web et le motion design.</p>
				<p>Mes comp&eacute;tences incluent la cr&eacute;ation d'identit&eacute; visuelle, le logotype,<br>
				la conception de support papier tels que : plaquettes, brochures,<br>
				dossier de presse, flyer, mais aussi le design web et les applications<br>
				tablettes et mobiles.</p>
				<div id="skills">
					<div class="skill" data-value="85" data-name="Photoshop" data-color="rgba(74, 136, 166, 1)"></div>
					<div class="skill" data-value="80" data-name="Illustrator" data-color="rgba(215, 152, 53, 1)"></div>
					<div class="skill" data-value="75" data-name="Indesign" data-color="rgba(206, 91, 131, 1)"></div>
					<div class="skill" data-value="60" data-name="AfterEffect" data-color="rgba(71, 71, 71, 1)"></div>
					<div class="skill" data-value="55" data-name="Flash" data-color="rgba(212, 81, 81, 1)"></div>
				</div>
				<div class="cv">
					<button type="submit" onclick="window.open('./pdf/cv-cyrine_malek-fr.pdf');">
						<span>Curriculum Vitae</span>
					</button>
				</div>
			</div>

		</div>
		<div class="scene portfolio">
			<div class="spikes"></div>
			<div class="content">
				<h3 id="portfolio">Mes Travaux</h3>
				<div id="crea_graph">
					<h4>Cr&eacute;ation graphique</h4>
					<div class="mask">
						<div class="arrows">
							<div class="previous"></div>
							<div class="next"></div>
						</div>
						<div class="frame">
							<div>
								<img src="works/crea_graphique/ecran-1.png" alt="">
								<img src="works/crea_graphique/ecran-2.png" alt="">
								<img src="works/crea_graphique/ecran-3.png" alt="">
								<img src="works/crea_graphique/ecran-4.png" alt="">
								<img src="works/crea_graphique/ecran-5.png" alt="">
								<img src="works/crea_graphique/ecran-6.png" alt="">
								<img src="works/crea_graphique/ecran-7.png" alt="">
								<img src="works/crea_graphique/ecran-8.png" alt="">
							</div>
							<ul>
								<li rel="0" class="current">&nbsp;</li>
								<li rel="1">&nbsp;</li>
								<li rel="2">&nbsp;</li>
								<li rel="3">&nbsp;</li>
								<li rel="4">&nbsp;</li>
								<li rel="5">&nbsp;</li>
								<li rel="6">&nbsp;</li>
								<li rel="7">&nbsp;</li>
							</ul>
						</div>
					</div>
				</div>
				<div id="motion_des">
					<h4>Motion Design</h4>
					<div class="mask">
						<div class="arrows">
							<div class="previous"></div>
							<div class="next"></div>
						</div>
						<div class="frame">
							<div>
								<img src="works/motion_design/ecran-1.png" alt="">
								<img src="works/motion_design/ecran-2.png" alt="">
								<img src="works/motion_design/ecran-3.png" alt="">
							</div>
							<ul>
								<li rel="0" class="current">&nbsp;</li>
								<li rel="1">&nbsp;</li>
								<li rel="2">&nbsp;</li>
							</ul>
						</div>
					</div>
				</div>
				<div id="crea_perso">
					<h4>Cr&eacute;ations personnelles</h4>
					<div class="mask">
						<div class="arrows">
							<div class="previous"></div>
							<div class="next"></div>
						</div>
						<div class="frame">
							<div>
								<img src="works/crea_perso/ecran-1.jpg" alt="">
								<img src="works/crea_perso/ecran-2.jpg" alt="">
								<img src="works/crea_perso/ecran-3.jpg" alt="">
								<img src="works/crea_perso/ecran-4.jpg" alt="">
							</div>
							<ul>
								<li rel="0" class="current">&nbsp;</li>
								<li rel="1">&nbsp;</li>
								<li rel="2">&nbsp;</li>
								<li rel="3">&nbsp;</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="scene contact">
			<div class="dotted"></div>
			<h4 id="contact"></h4>
			<h3>Contactez-moi !</h3>
			<p>Remplissez ce formulaire et je reviendrais vers vous d&egrave;s que possible.</p>
			<p class="form">
				<label for="contact[name]">Nom</label>
				<input type="text" id="contact[name]">
				<label for="contact[email]">Email</label>
				<input type="text" id="contact[email]">
				<label for="contact[subject]">Objet</label>
				<input type="text" id="contact[subject]">
				<label for="contact[message]">Message</label>
				<textarea id="contact[message]"></textarea>
				<button type="submit">
					<span>Envoyer</span>
				</button>
			</p>
			<a href="#home" class="top"></a>
		</div>
		<div id="cache">
			<img src="imgs/logo_head.png" id="head" alt="">
		</div>
	</body>
</html>